<template>
    <div class="table">
      <el-table
        :data="tableData"
        height="100%"
        :header-cell-style="{ color: '#000' }"
        border
        empty-text="暂无数据"
        style="width: 100%"
      >
        <el-table-column label="名称" width="100" align="center" prop="dayOfWeek" />
        <el-table-column label="商品列表" align="center" >
          <template #default="scope">
            <div class="goods">
              <div class="imgs" v-for="item in scope.row.goodsList" :key="item.id">
                <span>{{item.name}}</span>
                <img
                  style="width: 100px; height: 100px"
                  :src="item.img_url"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" width="200" align="center" label="创建时间" />
        <!-- 操作  -->
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="editFn(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :close-on-click-modal="false" v-model="dialogFormVisible" title="编辑">
        <el-form ref="ruleFormRef" :model="params" :rules="rules">
          <el-form-item label="商铺:" :label-width="formLabelWidth">
            <el-select clearable v-model="storeCode" placeholder="请选择" @change="getSearch">
              <el-option v-for="(item,index) in storeList" :key="index" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item prop="goodsIds" label="商品列表" :label-width="formLabelWidth">
            <!-- 下拉 -->
            <el-select v-model="params.goodsIds" multiple placeholder="请选择">
              <el-option
                v-for="item in goodsListData"
                :key="item.goodsId"
                :label="item.name"
                :value="item.goodsId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
            <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import { editMenuData,getMenuListData,getGoodsList } from '@/api/home.js'
import { ElMessage,ElMessageBox } from 'element-plus'

const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
  goodsList: {
    type: Array,
    default: [],
  },
  storeList: {
    type: Array,
    default: [],
  },
});
const goodsListData = ref(props.goodsList);
const tableData = ref(props.dataList);
const storeCode = ref('')
const dialogFormVisible = ref(false)
const ruleFormRef = ref()
const params = reactive({
  goodsIds: []
})
const rules = reactive({
  goodsIds: [
    { required: true, message: '请选择商品', trigger: 'blur' },
  ],
})
const formLabelWidth = '120px'

const getList = ()=>{
  tableData.value = []
  getMenuListData().then(res => {
    if (res.code==0) {
      tableData.value = res.data
    }
  })
}
const editFn = (row) => {
  console.log(row)
  let goodsIds = row.goodsIds.split(',')
  // 数组里元素转number类型
  goodsIds = goodsIds.map(Number)
  params.menuId = row.id
  params.rank = row.rank
  params.goodsIds = goodsIds
  dialogFormVisible.value = true
}
const getSearch = async () => {
  goodsListData.value = []
  const res = await getGoodsList({ storeCode: storeCode.value})
  if (res.code==0) {
    goodsListData.value.push(...res.data.list)
  }
};
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      params.goodsIds = params.goodsIds.join(',')
      editMenuData(params).then(res => {
        if (res.code == 0) {
          ElMessage({
            message: '编辑成功',
            type: 'success',
          })
          dialogFormVisible.value = false
          getList()
        }else{
          ElMessage({
            message: res.message,
            type: 'error',
          })
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<style lang="less" scoped>
.goods{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.imgs {
  display: flex;
  flex-direction: column;
  img {
    margin-right: 10px;
  }
}
</style>